<template>
  <div class="sideBar">
    <div class="sideHeader">
      <el-image :src="srcheader">
        <div slot="placeholder" class="image-slot">
          加载中
          <span class="dot">...</span>
        </div>
      </el-image>
    </div>
    <div class="sideBody">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>排行榜</span>
        </div>
        <el-collapse accordion>
          <el-collapse-item
            v-for="item in collapseItem"
            :key="item.title"
            :title="item.title"
            :name="item.id"
          >
            <div>{{item.body}}</div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
    <div class="sideFooter">
      <el-image :src="srcfooter">
        <div slot="placeholder" class="image-slot">
          加载中
          <span class="dot">...</span>
        </div>
      </el-image>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      srcheader:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      srcfooter:
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588612699004&di=b0002f8ef4329613599bd7a92c099637&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Feed96786010c7453be0222d2755dc5dee7770a1d.jpg",
      collapseItem: [
        {
          id: "SAHUQWE123ASDA",
          title: "一致性 Consistency",
          body:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念"
        },
        {
          id: "SAQQWE1123ABBB",
          title: "反馈 Feedback",
          body:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念"
        },
        {
          id: "SAHUQWE123ASDB",
          title: "效率 Efficiency",
          body:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念"
        },
        {
          id: "SAQQWE1123ABVV",
          title: "可控 Controllability",
          body:
            "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念"
        }
      ]
    };
  }
};
</script>